<template>
    <span class="demonstration">{{ widget.options.inputnumberText }}</span>
    <el-input-number
      v-model="input"
      :style="{ width: inputWidth + 'px' }"
      :min="widget.options.min"
      :max="widget.options.max"
      :step="widget.options.step"
      :step-strictly="widget.options.stepStrictly"
      :precision="widget.options.precision"
      :size="widget.options.size"
      :readonly="widget.options.readonly"
      :disabled="widget.options.disabled"
      :controls-position="widget.options.controlsPosition"
      :validate-event="widget.options.validateEvent"
      @focus.stop="selectField"
    >
      <slot></slot>
    </el-input-number>
  </template>
  
  <script setup>
  import { ref, watch } from "vue";
  import { assignmentWidget } from "@/views/pageDesign/components/globalVariable";
  
  defineOptions({
    name: "inputnumberWidget",
    inheritAttrs: false,
  });
  
  let $props = defineProps({
    widget: {
      type: Object,
      required: true,
    },
  });
  let input = ref(1);
  //监听输入框改变，传值给属性里的modelValue
  watch(
    () => input.value,
    (newValue, oldValue) => {
      $props.widget.options.modelValue = newValue;
    }
  );
  //监听属性里的modelValue改变，传值给input
  watch(
    () => $props.widget.options.modelValue,
    (newValue, oldValue) => {
      input.value = newValue;
    }
  );
  //输入框宽度
  let inputWidth = ref(240);
  watch(
    () => inputWidth,
    (newValue, oldValue) => {
      $props.widget.options.inputnumberWidth = newValue;
    }
  );
  watch(
    () => $props.widget.options.inputnumberWidth,
    (newValue, oldValue) => {
      inputWidth.value = newValue;
    }
  );
  let selectField = () => {
    assignmentWidget($props.widget);
  };
  </script>
  
  <style lang="scss" scoped>
  .demonstration {
    margin-right: 10px;
  }
  </style>
  